<template>
	<view class="container flex-items-plus flex-column">
		<view class="login-logoBox">
			<image class="login-logo" src="/static/image/logo.png"></image>
		</view>
		<view class="mar-top-60">
			<view class="wechat-login-btn" @click="wechatLogin">
				<image class="wechat-icon" src="/static/image/wechat.png"></image>
				<text class="login-text">微信授权登录</text>
			</view>
		</view>
		<view class="flex-row-plus mar-top-30">
			<text class="font-colors">使用微信授权登录，便捷又安全</text>
		</view>
		<view class="switch-login" @click="switchToSmsLogin">
			<text class="switch-text">使用手机号登录</text>
		</view>
	</view>
</template>

<script setup>
import { inject, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import request from '@/utils/request.js';

const $store = inject('$store')
const noLogin = ref(false)

onLoad(() => {
	if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == '') {
		noLogin.value = true
	} else {
		getUserInfo()
	}
})

// 微信授权登录
const wechatLogin = () => {
	// #ifdef H5
	// 检测是否在微信浏览器中
	const isWechat = () => {
		const ua = window.navigator.userAgent.toLowerCase();
		return ua.includes('micromessenger');
	}
	
	if (!isWechat()) {
		uni.showToast({
			title: '请在微信中打开',
			icon: 'none'
		});
		return;
	}
	
	// 调用微信授权登录接口
	// 构造微信授权链接
	const appId = 'wxa6cbd7b7e159d675'; // 公众号appId
	const redirectUri = encodeURIComponent(window.location.origin + '/#/pages/preload/wechat-callback'); 
	const scope = 'snsapi_userinfo'; // 授权范围
	const state = 'linfeng_love'; // 自定义参数
	
	const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
	
	// 跳转到微信授权页面
	window.location.href = authUrl;
	
	// #endif
	
	// #ifndef H5
	uni.showToast({
		title: '请在微信中打开',
		icon: 'none'
	});
	// #endif
}

// 切换到短信登录
const switchToSmsLogin = () => {
	uni.navigateTo({
		url: '/pages/preload/sms-login'
	});
}

const getUserInfo = () => {
	request.get("user/userInfo").then(res => {
		let loginUser = res.result;
		$store.commit('setLoginUser', loginUser);
		if(loginUser == null || loginUser.userName == null){
			uni.reLaunch({
				url:"/pages/guide/step"
			})
		}else{
			uni.switchTab({
				url:"/pages/index/index"
			})
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #FFFFFF;
	min-height: 100%;
	width: 100%;
	position: absolute;

	.login-logoBox {
		margin-top: -300rpx;

		.login-logo {
			width: 200rpx;
			height: 200rpx;
		}
	}
	
	.wechat-login-btn {
		background: #07c160;
		color: #ffffff;
		height: 100rpx;
		width: 600rpx;
		text-align: center;
		line-height: 100rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.wechat-icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		
		.login-text {
			font-size: 32rpx;
		}
	}
	
	.switch-login {
		margin-top: 50rpx;
		
		.switch-text {
			color: $lf-text-blue;
			text-decoration: underline;
		}
	}
}

.flex-items-plus {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-column {
	flex-direction: column
}

.flex-items {
	display: flex;
	align-items: center;
}

.flex-row-plus {
	display: flex;
	flex-direction: row
}

.mar-top-60 {
	margin-top: 60upx;
}

.mar-top-30 {
	margin-top: 30upx;
}

.font-colors {
	color: #adaca9;
}
</style>